<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://1.95.157.217/static/reset.css">
    <link rel="stylesheet" href="./style/index.css">
    <title>林衍未来</title>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container header-container">
            <a href="#" class="logo">林衍未来<span>LYNOVA</span></a>
            <nav>
                <ul>
                    <li><a href="#home">首页</a></li>
                    <li><a href="#products">产品中心</a></li>
                    <li><a href="#contact">招聘及赞助</a></li>
                    <li><a href="#lindadayo">创始人介绍</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 轮播图 -->
    <section class="banner" id="home">
        <div class="container">
            <div class="banner-content">
                <h1>程序爱好者集群</h1>
                <p>一群热爱代码的追梦少年</p>
                <a href="#lindadayo" class="btn">林大大哟</a>
            </div>
        </div>
    </section>

    <!-- 产品展示 -->
    <section class="section products" id="products">
        <div class="container">
            <h2 class="section-title">产品中心</h2>
            <div class="product-grid">
                <div class="product-card">
                    <div class="product-img">
                        <img src="./image/wmap.png" alt="WMapJs">
                    </div>
                    <div class="product-info">
                        <h3>WMap.js</h3>
                        <p>基于openlayers6开发的pc端地图，包含17个类的完整地图</p>
                        <a href="http://1.95.157.217/wmap-doc/index.html" class="btn">在线访问</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="./image/lveRectangle.png" alt="LveRectangleJs">
                    </div>
                    <div class="product-info">
                        <h3>LveRectangle.js</h3>
                        <p>矩形绘制 + 矩形类 + 截图导出 用于在对应dom上绘制/缩放/拖动一个矩形框，并可截图及导出</p>
                        <a href="http://1.95.157.217/lveRectangleJs/index.html" class="btn">在线访问</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="./image/previewImg.png" alt="previewImgJs">
                    </div>
                    <div class="product-info">
                        <h3>PreviewImg.js</h3>
                        <p>用于多图片的缩放展示及涂鸦截图，包含一系列截图快捷键，最后可导出File文件和base64图片</p>
                        <a href="http://1.95.157.217/previewImgJs/index.html" class="btn">在线访问</a>
                    </div>
                </div>
                <div class="product-card">
                    <div class="product-img">
                        <img src="./image/generatePdf.png" alt="generatePdfJs">
                    </div>
                    <div class="product-info">
                        <h3>GeneratePdf.js</h3>
                        <p>html dom生成pdf，可传入页眉dom，页脚dom，正文dom，可传入class来分页，也可自动分页和默认分页，最后可预览/生成pdf</p>
                        <a href="http://1.95.157.217/generatePdfJs/index.html" class="btn">在线访问</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 招聘及赞助 -->
    <section class="section about" id="contact">
        <div class="container">
            <h2 class="section-title">招聘及赞助</h2>
            <div class="about-content">
                <div class="about-img">
                </div>
                <div class="about-content">
                    <h3>招聘及赞助</h3>
                    <p>开源多个前端项目，但由于缺乏赞助商，导致蛮多很有趣的项目无法继续推广开发，希望能有更多小伙伴来加入我们！</p>
                    <p>前端、后端小伙伴们都可，想要练手项目和提升自己的小伙伴们速速来吧</p>
                    <p>企业及个人赞助商请联系此邮箱 lindadayo@foxmail.com</p>
                </div>
            </div>
        </div>
    </section>
    <!-- 创始人介绍 -->
    <section class="section about" id="lindadayo">
        <div class="container">
            <h2 class="section-title">创始人介绍</h2>
            <div class="about-content">
                <div class="about-img">
                </div>
                <div class="about-content">
                    <h3>林大大哟</h3>
                    <p>LYNOVA创始人、csdn 16k粉丝、独立开源WMapJs、previewImgJs和LveRectangleJs等多个项目</p>
                    <p>某知名互联网公司前端开发</p>
                    <p><a style="color: #1e88e5;" href="https://blog.csdn.net/qq_39404437">csdn地址</a></p>
                    <p><a style="color: #1e88e5;" href="https://gitee.com/lin_peng118">gitee地址</a></p>
                    <p><a style="color: #1e88e5;" href="https://github.com/linpeng118">github地址</a></p>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer id="contact">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>关于我们</h3>
                    <p>谁说做程序是孤独的，我们就是一群热爱程序，喜欢代码的追梦少年</p>
                </div>
                <div class="footer-column">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="#home">首页</a></li>
                        <li><a href="#products">产品中心</a></li>
                        <li><a href="#contact">招聘及赞助</a></li>
                        <li><a href="#lindadayo">创始人介绍</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>联系我们</h3>
                    <div class="contact-info">
                        <p><i class="fas fa-map-marker-alt"></i> 四川成都</p>
                        <p><i class="fas fa-envelope"></i> lindadayo@foxmail.com</p>
                    </div>
                </div>
            </div>
            <div class="copyright">
                <p>&copy; 2025 LYNOVA</p>
            </div>
        </div>
    </footer>
    <script src="./scripts/index.js"></script>
    <script src="http://1.95.157.217/static/siteMonitor.js"></script>
</body>
</html>